<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title>layout 后台大布局 - Layui</title>
<link rel="stylesheet"  href="/layui/css/layui.css">
<style type="text/css">
	.layadmin-iframe {
		position: absolute;
		width: 100%;
		height: 100%;
		left: 0;
		top: 100px;
		right: 0;
		bottom: 0
}
</style>
<script  src="/layui/layui.js"></script>
<script src="/plugins/jquery/jquery-1.10.2.min.js"></script>
<script>
//JavaScript代码区域
var element;
layui.use('element', function(){
 	element = layui.element;
});

function check(url){
	  $("#ddd").attr("src",url);
	  var tabId=new Date().getTime();
	  element.tabAdd('top', {
	        title: '新选项'+ (Math.random()*1000|0) //用于演示
	        ,content: '内容'+ (Math.random()*1000|0)
	        ,id: new Date().getTime() //实际使用一般是规定好的id，这里以时间戳模拟下
	      });
	  element.tabChange('top', tabId); //切换
}

</script>
</head>
<body class="layui-layout-body">
<div class="layui-layout layui-layout-admin">
  <div class="layui-header">
    <div class="layui-logo">layui 后台布局</div>
    <!-- 头部区域（可配合layui已有的水平导航） -->
    <ul class="layui-nav layui-layout-left">
      <li class="layui-nav-item"><a href="">控制台</a></li>
      <li class="layui-nav-item"><a href="">商品管理</a></li>
      <li class="layui-nav-item"><a href="">用户</a></li>
      <li class="layui-nav-item">
        <a href="javascript:;">其它系统</a>
        <dl class="layui-nav-child">
          <dd><a href="">邮件管理</a></dd>
          <dd><a href="">消息管理</a></dd>
          <dd><a href="">授权管理</a></dd>
        </dl>
      </li>
    </ul>
    <ul class="layui-nav layui-layout-right">
      <li class="layui-nav-item">
        <a href="javascript:;">
          <img src="http://t.cn/RCzsdCq" class="layui-nav-img">
          		贤心
        </a>
        <dl class="layui-nav-child">
          <dd><a href="">基本资料</a></dd>
          <dd><a href="">安全设置</a></dd>
        </dl>
      </li>
      <li class="layui-nav-item"><a href="">退了</a></li>
    </ul>
  </div>
  
  <div class="layui-side layui-bg-black">
    <div class="layui-side-scroll">
      <!-- 左侧导航区域（可配合layui已有的垂直导航） -->
      <ul class="layui-nav layui-nav-tree"  lay-filter="test">
        <li class="layui-nav-item layui-nav-itemed">
          <a class="" href="javascript:;">所有商品</a>
          <dl class="layui-nav-child">
            <dd><a onclick="check('http://www.baidu.com');">列表一</a></dd>
            <dd><a href="javascript:;">列表二</a></dd>
            <dd><a href="javascript:;">列表三</a></dd>
            <dd><a href="">超链接</a></dd>
          </dl>
        </li>
        <li class="layui-nav-item">
          <a href="javascript:;">解决方案</a>
          <dl class="layui-nav-child">
            <dd><a href="javascript:;">列表一</a></dd>
            <dd><a href="javascript:;">列表二</a></dd>
            <dd><a href="">超链接</a></dd>
          </dl>
        </li>
        <li class="layui-nav-item"><a href="">云市场</a></li>
        <li class="layui-nav-item"><a href="">发布商品</a></li>
      </ul>
    </div>
  </div>
<div class="layui-body" id="LAY_app_body">
	<div class="layui-tab layui-tab-card" lay-allowclose="true" lay-filter="top">
	  <ul class="layui-tab-title">
<!-- 	    <li class="layui-this:after" lay-id="20">网站设置<i class="layui-icon layui-unselect layui-tab-close">ဆ</i></li> -->
<!-- 	    <li lay-id="21">用户基本管理<i class="layui-icon layui-unselect layui-tab-close">ဆ</i></li> -->
<!-- 	    <li lay-id="22">权限分配<i class="layui-icon layui-unselect layui-tab-close">ဆ</i></li> -->
<!-- 	    <li lay-id="23">商品管理<i class="layui-icon layui-unselect layui-tab-close">ဆ</i></li> -->
<!-- 	    <li lay-id="24">订单管理<i class="layui-icon layui-unselect layui-tab-close">ဆ</i></li> -->
	  </ul>
	<!--   <div class="layui-tab-content" style="height:100%;"> -->
	<!--     <div class="layui-tab-item" style="height:100%;"> -->
	<!--     	 <div class="layadmin-tabsbody-item layui-show"> -->
	<!--           <iframe src="main.html" frameborder="0" id="ddd" class="layadmin-iframe"></iframe> -->
	<!--       </div> -->
	<!--     </div> -->
	<!--     <div class="layui-tab-item">3</div> -->
	<!--     <div class="layui-tab-item">4</div> -->
	<!--     <div class="layui-tab-item">5</div> -->
	<!--     <div class="layui-tab-item">6</div> -->
	<!--   </div> -->
	<div class="layui-tab-content">
<!-- 	    <div class="layui-tab-item"> -->
<!-- 	    </div> -->
<!-- 	    <div class="layui-tab-item">内容2</div> -->
<!-- 	    <div class="layui-tab-item">内容3</div> -->
<!-- 	    <div class="layui-tab-item">内容4</div> -->
<!-- 	    <div class="layui-tab-item">内容5</div> -->
	  </div>
	</div>
  </div>
  <div class="layui-footer">
<!--     底部固定区域 -->
<!--     © layui.com - 底部固定区域 -->
  </div>
</div>
</body>
</html>
